<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- React核心包 最先引入  提供一个对象React -->
  <script src="../../react资料_stu/依赖包/react.development.js"></script>
  <!-- ReactDOM包  提供一个对象ReactDOM -->
  <script src="../../react资料_stu/依赖包/react-dom.development.js"></script>
  <!-- babel -->
  <script src="../../react资料_stu/依赖包/babel.min.js"></script>
  <title>Document</title>
</head>

<body>
  <div id="app">

  </div>
</body>

<script type="text/babel">
  //  React.Component 是一个类 父类
  // Fn1  extends  了 React.Component 子类

  //class 是一个类
  //他也是一个函数
  //函数就有原型对象
  // class Student{
  //   //constructor 构造器 指向函数本身 用于给实列化对象扩展属性
  //   constructor(age){
  //     this.age =age
  //   }

  //   //这是定义在原型对象上的方法
  //   //给实列对象用的
  //   study(){
  //     console.log("学习");
  //   }

  // }

  // console.dir(Student);



  class Fn1 extends React.Component {

    //类式组件必须要有一个render方法
    //为什么
    //在使用组件的时候 
    //需要一个虚拟DOM
    //它就会找render方法
    render() {
      return <p>类式组件1</p>
    }

  }


  class Fn2 extends React.Component {

    render() {
      return <p>类式组件2</p>
    }

  }

  class Title extends React.Component {

    render() {
      return (<div>
        <Fn1 />
        <br />
        <Fn2 />
      </div>)
    }

  }
  

  const root = ReactDOM.createRoot(document.getElementById('app'));
  //类式组件使用的时候做了什么
  /* 
  //找到了Fn的组件，发现它是一个类式组件
  //实列化这个类 得到 一个组件实列 f
  //再调用这个实列身上的render方法 得到虚拟DOM f.render()
  */
  root.render(<Title />)

</script>


</html>